<template>
    <div class="postauthority">
        <pagetitle type="2"></pagetitle>
        <el-card ref="pagecard">
            <!-- <el-checkbox-group v-model="checkedCities"> -->
            <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" :indent="100" default-expand-all>
                <el-table-column prop="limits" label="平台运维">
                    <template #default="scope">
                        <el-checkbox v-model="scope.row.checked" :disabled="scope.row.disabled" :indeterminate="scope.row.indeterminate" @change="change(scope.row)">
                            <span class="names">
                                {{ scope.row.limits }}
                            </span>
                        </el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="explain" label="权限说明" />
                <el-table-column prop="grade" label="高危管理等级" width="200">
                    <template #default="scope">
                        <el-icon v-for="item in scope.row.grade" color="#F54347"><StarFilled /></el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="beAuthorized" label="已授权管理岗位" width="300" />
            </el-table>
            <!-- </el-checkbox-group> -->
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ParentDict } from "@/utils/jurisdictionHandle";
const value = ref(5);
interface Tree {
    id: number;
    label: string;
    children?: Tree[];
}
const checkedCities = ref([]);
const tableData = reactive([
    {
        limits: "个人管理",
        explain: "包括成员管理、部门管理、授权管理绩效考核员工培训、资质技能等。",
        grade: 0,
        beAuthorized: "",
        indeterminate: false,
        checked: false,
        disabled: false,
        id: 1,
        children: [
            {
                limits: "个人认证",
                explain: "包括输入法定代表人信息、统一社会信用代码、组织机构类型、产业分类、联系人信息及团队位置等。",
                grade: 5,
                beAuthorized: "",
                indeterminate: false,
                checked: false,
                disabled: false,
                id: 11,
                children: [
                    {
                        limits: "查看个人认证",
                        explain: "第一次提交团队的认证申请。",
                        grade: 0,
                        beAuthorized: "",
                        indeterminate: false,
                        checked: false,
                        disabled: false,
                        id: 111,
                    },
                    {
                        limits: "认证审核",
                        explain: "修改后提交团队的认证申请。",
                        grade: 0,
                        beAuthorized: "",
                        indeterminate: false,
                        checked: false,
                        disabled: false,
                        id: 112,
                        children: [
                            {
                                limits: "查看个人认证",
                                explain: "第一次提交团队的认证申请。",
                                grade: 0,
                                beAuthorized: "",
                                indeterminate: false,
                                checked: false,
                                disabled: false,
                                id: 1121,
                            },
                            {
                                limits: "查看个人认证",
                                explain: "第一次提交团队的认证申请。",
                                grade: 0,
                                beAuthorized: "",
                                indeterminate: false,
                                checked: false,
                                disabled: false,
                                id: 1122,
                            },
                        ],
                    },
                ],
            },
            {
                limits: "个人认证",
                explain: "包括输入法定代表人信息、统一社会信用代码、组织机构类型、产业分类、联系人信息及团队位置等。",
                grade: 5,
                beAuthorized: "",
                indeterminate: false,
                checked: false,
                disabled: false,
                id: 12,
                children: [
                    {
                        limits: "查看个人认证",
                        explain: "第一次提交团队的认证申请。",
                        grade: 0,
                        beAuthorized: "",
                        indeterminate: false,
                        checked: false,
                        disabled: false,
                        id: 121,
                    },
                    {
                        limits: "认证审核",
                        explain: "修改后提交团队的认证申请。",
                        grade: 0,
                        beAuthorized: "",
                        indeterminate: false,
                        checked: false,
                        disabled: false,
                        id: 122,
                    },
                    {
                        limits: "认证审核",
                        explain: "修改后提交团队的认证申请。",
                        grade: 0,
                        beAuthorized: "",
                        indeterminate: false,
                        checked: false,
                        disabled: false,
                        id: 123,
                    },
                ],
            },
        ],
    },
    {
        limits: "团队管理",
        explain: "包括查看成员、删除成员、邀请成员 等功能。",
        grade: 0,
        beAuthorized: "",
        indeterminate: false,
        checked: false,
        id: 2,
        children: [
            {
                limits: "查看团队认证",
                explain: "查看 本部门 成员详情。",
                grade: 0,
                beAuthorized: "",
                indeterminate: false,
                checked: false,
                id: 21,
            },
            {
                limits: "认证审核",
                explain: "发起 邀请成员，并邀请。",
                grade: 3,
                beAuthorized: "",
                indeterminate: false,
                checked: false,
                id: 22,
            },
        ],
    },
]);

const dict = new ParentDict(tableData);
const change = (item: any) => {
    recursion(item);
    // let parent: any = dict.getPid(item.id);
    iteration(item);
};
const recursion = (item: any) => {
    if (item.children && item.children.length > 0) {
        item.indeterminate = false;
        item.children.forEach((v: any) => {
            if (!v.disabled) {
                v.checked = item.checked;
            }
            if (v.children && v.children.length > 0) {
                setTimeout(() => {
                    recursion(v);
                }, 10);
            }
        });
    }
};
const iteration = (item: any) => {
    let parent: any = dict.getPid(item.id);
    if (parent) {
        if (!item.children || item.length == 0) {
            if (dict.areObjectsEqual(parent.children, "checked", true)) {
                parent.indeterminate = false;
                parent.checked = true;
            } else if (dict.areObjectsEqual(parent.children, "checked", false)) {
                parent.indeterminate = false;
                parent.checked = false;
            } else {
                parent.indeterminate = true;
                parent.checked = false;
            }
        } else {
            if (dict.areObjectsEqual(parent.children, "checked", true)) {
                parent.indeterminate = false;
                parent.checked = true;
            } else if (dict.areObjectsEqual(parent.children, "checked", false)) {
                if (dict.areObjectsEqual(parent.children, "indeterminate", true)) {
                    parent.indeterminate = true;
                    parent.checked = false;
                } else if (dict.areObjectsEqual(parent.children, "indeterminate", false)) {
                    parent.indeterminate = false;
                    parent.checked = false;
                } else {
                    parent.indeterminate = true;
                    parent.checked = false;
                }
            } else {
                parent.indeterminate = true;
                parent.checked = false;
            }
        }
        setTimeout(() => {
            iteration(parent);
        }, 100);
    }
};
</script>
<style scoped lang="scss">
.names {
    font-size: 12px !important;
}
</style>
